import React, { useRef } from 'react';
import VideoHistory from './index';

/**
 * 使用示例：在 textToVideo 模块中替换原有的 resultList
 */
const TextToVideoExample = () => {
  const resultsItemRefs = useRef([]);

  // 处理视频历史列表数据
  const handleVideoHistoryList = (list) => {
    console.log('文生视频历史列表:', list);
    // 可以在这里处理列表数据，比如更新状态或进行其他操作
  };

  // 处理项目点击事件
  const handleItemClick = (item) => {
    console.log('点击了视频项目:', item);
    // 可以在这里处理点击逻辑，比如打开详情弹窗等
  };

  return (
    <VideoHistory
      ref={resultsItemRefs}
      currentMenuTitle="文生视频"
      passVideoHistoryList={handleVideoHistoryList}
      operType="textToVideo"
      onItemClick={handleItemClick}
    />
  );
};

/**
 * 使用示例：在 imageToVideo 模块中使用，带自定义按钮
 */
const ImageToVideoExample = () => {
  const resultsItemRefs = useRef([]);
  
  // 自定义按钮配置
  const customButtons = [
    {
      type: 'regenerate',
      icon: '/path/to/regenerate-icon.svg', // 替换为实际图标路径
      text: '重新生成',
    },
    {
      type: 'edit',
      icon: '/path/to/edit-icon.svg', // 替换为实际图标路径
      text: '编辑参数',
    }
  ];

  // 额外字段映射
  const additionalFields = {
    duration: 'duration',      // 将 operInfo.duration 映射到 duration 字段
    model: 'modelName',       // 将 operInfo.modelName 映射到 model 字段
    style: 'style'            // 将 operInfo.style 映射到 style 字段
  };

  const handleVideoHistoryList = (list) => {
    console.log('图生视频历史列表:', list);
  };

  const handleItemClick = (item) => {
    console.log('点击了图生视频项目:', item);
  };

  // 处理自定义按钮点击
  const handleCustomButtonClick = (type, item) => {
    switch (type) {
      case 'regenerate':
        console.log('重新生成:', item);
        // 处理重新生成逻辑
        break;
      case 'edit':
        console.log('编辑参数:', item);
        // 处理编辑逻辑
        break;
      default:
        console.log('未知操作:', type);
    }
  };

  return (
    <VideoHistory
      ref={resultsItemRefs}
      currentMenuTitle="图生视频"
      passVideoHistoryList={handleVideoHistoryList}
      operType="imageToVideo"
      customButtons={customButtons}
      additionalFields={additionalFields}
      onItemClick={handleItemClick}
      onCustomButtonClick={handleCustomButtonClick}
    />
  );
};

/**
 * 使用示例：在 frameToVideo 模块中使用，禁用 WebSocket
 */
const FrameToVideoExample = () => {
  const resultsItemRefs = useRef([]);

  const handleVideoHistoryList = (list) => {
    console.log('帧生视频历史列表:', list);
  };

  return (
    <VideoHistory
      ref={resultsItemRefs}
      currentMenuTitle="帧生视频"
      passVideoHistoryList={handleVideoHistoryList}
      operType="frameToVideo"
      enableSocket={false} // 禁用 WebSocket 监听
    />
  );
};

export {
  TextToVideoExample,
  ImageToVideoExample,
  FrameToVideoExample
};